<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.引出生命周期</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    生命周期
        别名:生命周期回调函数,生命周期函数,生命周期钩子
        Vue在关键时刻帮我们调用一些特殊名称的函数
        生命周期函数中的this指向是vm 或 组件实例对象
-->
    <!--  准备好一个容器  -->
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        <!--   插值调用进入死循环     -->
        <!--        {{change()}}-->
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            opacity: 1
        },
        methods: {
            //写在methods不满足需求, 写在methods 中,
            //1.作为事件的回调使用 (需求不是点击按钮后执行,不是鼠标滑动后执行)
            //2.插值语法直接调用{{change()}} ,
            // 模版加载调用change方法=>change方法改变this.opacity=>vue感知到数据变化,重新渲染页面=>模版加载调用change方法=>....
            //进入死循环
            /*            //vue管理的用普通函数
                        change() {
                            //不是vue管理的用箭头函数
                            setInterval(() => {
                                this.opacity -= 0.01
                                if (this.opacity <= 0) this.opacity = 1
                            }, 16)
                        }*/
        },
        //Vue完成模版的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用这个钩子函数
        mounted() {
            console.log('mounded')
            setInterval(() => {
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
            }, 16)
        }
    })

    //通过外部的定时器实现(不推荐)
    /*   setInterval(()=>{
           vm.opacity -= 0.01
           if (vm.opacity <= 0) vm.opacity = 1
       },16)*/

</script>
</html>